/**
 * @description 收藏夹/文章
 */
import style from './styles/Recommend.less';
import classnames from "classnames";
import React from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Button } from 'wd-mobile';
import ArticleItem from 'components/ArticleItem';
import TabBarTop from "components/TabBarTop";
import TabBar from "components/TabBar";
import ScrollReachEndContainer from "components/ScrollReachEndContainer";

import { article_banners, query_list } from "api_xukaiyu/app/content";

import icon_close from "images/icon/close.png";

import util from "commons/util";
let query = util.parseQueryString();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            article_banners: [],
            page: 1,
            article_list: []
        }

        // 是否正在加载数据
        this.loading = false;
    }
    componentDidMount() {
        // 集市banner
        article_banners().then(res => {
            this.setState({
                article_banners: res.data
            })
        })

        // 查询帖子列表
        this.query_list();
    }
    render() {
        return (
            <Fragment>
                <ScrollReachEndContainer className={classnames(style.main, "x-scroll-y")} loadText={this.state.scrollLoadText} onReachEnd={() => {
                    this.reachEnd();
                }}>
                    {
                        this.state.article_banners.length > 0 && <div className={style.horiList}>
                            {
                                this.state.article_banners.map((item, index) => {
                                    return (
                                        <div key={index} onClick={() => {
                                            location.href = item.linkUrl;
                                        }} className={classnames(style.horiListItem, "wdskeleton-translate")} style={{ backgroundImage: `url(${item.bannerPic})` }}>
                                            <div className={style.horiListItemLayer}>
                                                <div className={style.horiListItemLayerText}>
                                                    <span>{item.bannerTitle}</span>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    }
                    {
                        this.state.article_list.map((item, index) => {
                            return (
                                <ArticleItem key={index} data={item} />
                            )
                        })
                    }
                </ScrollReachEndContainer>
                <TabBarTop
                    className={style.tabBarTop}
                    tabs={[
                        {
                            name: "今日推荐",
                            url: "./market.html#/Recommend"
                        },
                        {
                            name: "线报集合",
                            url: "./market.html#/Collection"
                        }
                    ]}
                    activeIndex={0}
                />
                <TabBar activeIndex={2} />
            </Fragment>
        )
    }

    // 帖子列表
    query_list() {
        this.setState({
            scrollLoadText: "正在加载更多帖子..."
        })
        // 帖子列表
        query_list({
            page: this.state.page
        }).then(res => {
            const article_list = [...this.state.article_list, ...res.data];
            this.setState({
                page: res.data.length < 1 ? this.state.page : this.state.page + 1,
                article_list: article_list,
                scrollLoadText: res.data.length < 10 ? "没有更多帖子" : "正在加载更多帖子..."
            })
            this.loading = false;
        })
    }

    // 触底
    reachEnd() {
        if (!this.loading) {
            this.loading = true;
            this.query_list();
        }
    }
}

export default App;